<template>
  <t-form
    ref="form"
    :class="['item-container', `register-${type}`]"
    :data="formData"
    :rules="FORM_RULES"
    label-width="0"
    @submit="onSubmit"
  >
    <template v-if="type == 'phone'">
      <t-form-item name="name">
        <t-input v-model="formData.name" :maxlength="11" size="large" placeholder="请输入您的昵称">
          <template #prefix-icon>
            <t-icon name="user" />
          </template>
        </t-input>
      </t-form-item>
    </template>

    <template v-if="type == 'phone'">
      <t-form-item name="number">
        <t-input v-model="formData.number" type="text" size="large" placeholder="请输入您的手机号">
          <template #prefix-icon>
            <t-icon name="call" />
          </template>
        </t-input>
      </t-form-item>
    </template>

    <t-form-item name="password">
      <t-input
        v-model="formData.password"
        size="large"
        :type="showPsw ? 'text' : 'password'"
        clearable
        placeholder="请输入登录密码"
      >
        <template #prefix-icon>
          <t-icon name="lock-on" />
        </template>
        <template #suffix-icon>
          <t-icon :name="showPsw ? 'browse' : 'browse-off'" @click="showPsw = !showPsw" />
        </template>
      </t-input>
    </t-form-item>

    <t-form-item class="check-container" name="checked">
      <t-checkbox v-model="formData.checked">我已阅读并同意</t-checkbox>
      <t-link theme="primary" target="_blank" href="https://baike.baidu.com/item/%E5%AE%A0%E7%89%A9%E5%BA%97/771792">
        宠物商店使用协议
      </t-link>
      和
      <t-link theme="primary" target="_blank" href="https://baike.baidu.com/item/%E5%AE%A0%E7%89%A9%E5%BA%97/771792">
        petShop 隐私声明
      </t-link>
    </t-form-item>

    <t-form-item>
      <t-button block size="large" type="submit"> 注册 </t-button>
    </t-form-item>
  </t-form>
</template>

<script setup lang="ts">
import axios from 'axios';
import type { FormRule, SubmitContext } from 'tdesign-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { reactive, ref } from 'vue';

const INITIAL_DATA = {
  name: '',
  number: '',
  password: '',
  checked: false,
};

const FORM_RULES: Record<string, FormRule[]> = {
  name: [{ required: true, message: '请填写昵称', type: 'error' }],
  number: [{ required: true, message: '手机号必填', type: 'error' }],
  password: [{ required: true, message: '密码必填', type: 'error' }],
};

const type = ref('phone');

const form = ref();
const formData = ref({ ...INITIAL_DATA });
const user = reactive({
  name: '',
  number: '',
  password: '',
});

const showPsw = ref(false);

const emit = defineEmits(['registerSuccess']);

const onSubmit = (ctx: SubmitContext) => {
  if (ctx.validateResult === true) {
    if (!formData.value.checked) {
      MessagePlugin.error('请同意 宠物商店使用协议 和 隐私声明');
    } else {
      register();
    }
  }
};

const register = async () => {
  user.name = formData.value.name;
  user.number = formData.value.number;
  user.password = formData.value.password;
  try {
    const response = await axios.post('/api/user/register', user);
    console.log(response);
    if (response.data.success) {
      MessagePlugin.success('注册成功');
      emit('registerSuccess');
      sessionStorage.setItem('number', user.number);
    } else {
      MessagePlugin.error('注册失败');
    }
  } catch (e) {
    console.log(e);
  } finally {
    /* empty */
  }
};
</script>

<style lang="less" scoped>
@import '../index.less';
</style>
